<script setup>
import BackLink from "@/components/BackLink/index.vue"
import {useRoute, useRouter} from "vue-router";
import {ArrowRight, Back, Download} from "@element-plus/icons-vue";
import MyEcharts from "@/components/MyEcharts/index.vue"
import UserBaseInfo from "@/components/UserBaseInfo/index.vue";
import {
  addCertificateApi,
  addInternshipApi, detailsAuditApi, detailsInternshipApi, detailsWorkHonorApi,
  getStuDetailsApi,
  updateCertificateApi,
  updateInternshipApi
} from "@/api/school.js";
import {formatDateNoTime} from "@/utils/index.js";
import useUserStore from "@/store/modules/user.js";
import FilePreView from "@/components/FilePreView/index.vue";

const {proxy} = getCurrentInstance();

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const state = reactive({
  queryParams: {},
  studentInfo: {},
  editForm: {
    id: '',
    shipAddress: '',
    startTime: '',
    endTime: '',
    shipTerm: 1,
    shipWeek: '',
    shipCont: '',
    dateTime: '',
    shipTitle:'',
  },
  isShow:false,
  dateTime: '',
  rules: {
    shipWeek: [
      {required: true, message: '请选择实习周数', trigger: 'change'},
    ],
    dateTime: [
      {required: true, message: '请选择实习时间', trigger: 'change'},
    ],
    shipAddress: [
      {required: true, message: '请输入实习地址', trigger: 'blur'},
    ],
    shipCont: [
      {required: true, message: '请输入实习内容', trigger: 'blur'},
    ],
    shipTitle: [
      {required: true, message: '请输入实习标题', trigger: 'blur'},
    ],
  },
  title: '',
})
const handleBack = () => {
  router.go(-1)
}

const getStuDetails = async () => {
  const res = await getStuDetailsApi({id: state.queryParams.stuId})
  if (res.code == 200) {
    state.studentInfo = res.data
  }
}

const getDetails = async (id) => {
  const res = await detailsAuditApi({id})
  if (res.code === 200) {
    state.editForm = res.data
  }
}


onMounted(() => {
  state.queryParams.stuId = route.query.stuId
  state.isShow = route.query.isShow
  // 判断当前时间2-9月份以前是上半学期 其他都是下半学期
  if (new Date().getMonth() >= 2 && new Date().getMonth() <= 8) {
    state.editForm.shipTerm = 1
  } else {
    state.editForm.shipTerm = 2
  }


  if (route.query.id) {
    state.title = '见习详情'
    // 获取详情
    getDetails(route.query.id)
  } else {
    state.title = '添加见习'
  }

  getStuDetails()
})

</script>

<template>
  <div class="outBox">
    <el-card>
      <BackLink />
      <el-form ref="formRef" :model="state.editForm" :rules="state.rules" label-width="0">
        <div class="form-box">
          <UserBaseInfo :student-info=" state.studentInfo"/>
          <div class="form-line form-line3">
            <div class="form-name">荣誉标题</div>
            <div class="form-cont">
              <div class="form-text">
                {{state.editForm.auditTitle}}
              </div>
            </div>
          </div>

          <div class="form-lines">
            <div class="form-lineItem form-textArea">
              <div class="top">
                <div class="form-name">荣誉材料</div>
              </div>
              <div class="cont" >
                <FilePreView :url="state.editForm.auditFile" :file-type="state.editForm.auditFileType" width="500px"  />
              </div>
            </div>
          </div>
          <div class="center-btns" >
            <el-button @click="handleBack" type="primary">返回</el-button>
          </div>
        </div>
      </el-form>
    </el-card>

  </div>
</template>

<style scoped lang="scss">
.form-line3{
  display: flex !important;
}
:deep(.el-form-item--default) {
  margin-bottom: 0 !important;
}

:deep(.el-date-editor.el-input__wrapper), :deep(.el-select__wrapper) ,:deep(.el-input__wrapper){
  box-shadow: none !important;
}
.form-cont{
  display: flex;
  justify-content: left;
}

.form-text {
  color: var(--el-input-text-color, var(--el-text-color-regular));
  font-size: 14px;
  text-indent: 10px;
  display: flex;
  align-items: center;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.echart-box {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;

  :deep(.el-rate .el-rate__icon) {
    font-size: 30px;
  }

  :deep(.el-rate .el-rate__icon.is-active) {
    color: #152584;
  }

  .echart-cont {
    width: 40%;
  }

  .start-items {
    width: 50%;
    margin-bottom: 10px;

    .start-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;

      .name {
        width: 130px;
      }
    }
  }
}

.form-lines {
  width: 100%;
  margin-top: 20px;
  border-left: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;

  .form-lineItem {
    .cont {
      padding: 20px;
    }

    .top {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e5e5e5;
      cursor: pointer;
    }

    .form-name {
      //width: 150px;
    }

    .right-text {
      display: flex;
      align-items: center;

      span {
        color: #152584;
        margin-right: 20px;
      }
    }
  }
}

.text-items {
  padding: 20px;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(2, 550px);

  .text-item {
    margin-bottom: 20px;
  }

  .tit {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .bottom {
    display: flex;
    justify-content: space-between;

    .time {
      color: #827e7d;
    }
  }
}

.center-btns {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.form-textArea {
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;

  :deep(.el-textarea) {
    --el-input-border-color: #fff !important;
    --el-input-focus-border: #fff !important;
    --el-input-hover-border-color: #fff !important;
    --el-input-focus-border-color: #fff !important;

  }

  .form-name {
    //width: 150px !important;
  }
}

.form-box {
  .form-name {
    background: #f1f7ff;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    font-weight: bold;
    border-right: 1px solid #e5e5e5;
  }

  .form-line {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;

    .form-item {
      display: flex;
      align-items: center;

      .form-cont {
        width: calc(100% - 100px);

        :deep(.el-input) {
          --el-input-border-color: #fff !important;
          --el-input-focus-border: #fff !important;
          --el-input-focus-border-color: #fff !important;
        }
      }
    }
  }
}
</style>
